<template>
  <div class="pullUpPage">
    <div class="pullUpLeft">
      <div class="emergencyTab">
        <div
          v-for="(item, index) of areaTabList"
          :key="index"
          :class="{ active: areaTabIndex == index }"
          class="areaTabItem"
          @click="onAreaTabClick(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="header headerGreen">区域停车数据统计</div>
      <div class="monitoringData cleafix">
        <div
          v-for="(item, index) of monitoringData"
          :key="index"
          class="monitoringDataItem"
        >
          <p class="monitoringName">{{ item.name }}</p>
          <p class="monitoringValue">
            {{ item.value }}<span v-if="item.unit">{{ item.unit }}</span>
          </p>
        </div>
      </div>
      <div class="header headerRed">主要高速路运行情况</div>
      <div class="roadTable">
        <dv-scroll-board
          :config="tableConfig"
          style="width: 100%; height: 100%"
        />
      </div>
    </div>
    <div class="pullUpMiddle"></div>
    <div class="pullUpRight">
      <div class="header headerBlue">停车场流量走势统计</div>
      <div class="parkChart">
        <dv-charts :option="parkOption" style="width: 100%; height: 100%" />
      </div>
      <div class="header headerBlue">充电桩使用情况统计</div>
      <div class="charging">
        <div class="chargingIcon">
          <div class="item">
            <div class="icon icon1"></div>
            <div class="name">充电桩总数</div>
          </div>
          <div class="item">
            <div class="icon icon2"></div>
            <div class="name">充电桩总数</div>
          </div>
        </div>
        <div class="chargingValue">
          <div>2653</div>
          <div>2653</div>
        </div>
      </div>
      <div class="header headerBlue">充电设备状态</div>
      <div class="intelligen">
        <div class="chartDiv">
          <dv-active-ring-chart
            :config="intelligenConfig"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="legendDiv">
            <div
                v-for="(item, index) of intelligenConfig.data"
                :key="index"
                class="legendItem"
                :class="'legendItem'+(index+1)"
            >
                <span>{{ item.name }}</span>
                <span>{{ item.value }}</span>
                <span class="rate">{{ item.rate }}</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      areaTabList: [
        { name: "区域一", index: 0 },
        { name: "区域二", index: 1 },
        { name: "区域三", index: 2 },
        { name: "区域四", index: 3 },
      ],
      areaTabIndex: 0,
      monitoringData: [
        { name: "停车场总数", value: 23, unit: "" },
        { name: "开放车场", value: 1223, unit: "" },
        { name: "车位充足车场", value: 34, unit: "" },
        { name: "车位总数", value: 54, unit: "" },
        { name: "可用车位", value: 456, unit: "" },
        { name: "使用平均时长", value: 89, unit: "分钟" },
      ],
      tableConfig: {
        header: [
          "<span style='text-align:center'>车场</span>",
          "<span style='text-align:center'>空位监控</span>",
          "<span style='text-align:center'>运行状态</span>",
        ],
        rowNum: 9,
        headerBGC: "none",
        oddRowBGC: "none",
        evenRowBGC: "#1a3c70",
        align: ["center", "center", "center"],
        data: [
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
          ["华夏大厦", "120", "充足"],
        ],
      },
      parkOption: {
        legend: {
          data: [
            { name: "进场", color: '#2FFE9E'},
            { name: "出厂", color: '#29A0FF'},
          ],
          top: 10,
          textStyle: {
            fill: '#fff',
            fontSize: 10,
          }
        },
        grid: {
          left: "10%",
          right: "10%",
          top: "20%",
          bottom: "10%",
        },
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          data: "value",
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
          splitLine: {
            style: {
              stroke: "#14344d",
            },
          },
        },
        series: [
          {
            name: "进场",
            data: [120, 223, 190, 210, 350, 420, 398],
            type: "line",
            lineArea: {
              show: true,
              gradient: ['rgba(47, 254, 158, 0.6)', 'rgba(47, 254, 158, 0)']
            },
            smooth: true,
          },
          {
            name: "出厂",
            data: [80, 130, 140, 200, 310, 200, 375],
            type: "line",
            lineArea: {
              show: true,
              gradient: ['rgba(41, 160, 255, 0.6)', 'rgba(41, 160, 255, 0)']
            },
            smooth: true,
          },
        ],
      },
      intelligenConfig: {
        data: [
          {
            name: "正常设备数",
            value: 30,
            color: "#22C1D9",
            rate: '37%'
          },
          {
            name: "在维修设备数",
            value: 23,
            color: "#228AD9",
            rate: '28%'
          },
          {
            name: "异常设备数",
            value: 16,
            color: "#ffb07e",
            rate: '20%'
          },
        ],
        radius: "70%",
        activeRadius: "80%",
        lineWidth: 25,
        digitalFlopStyle: {
          fontSize: 15,
          fill: "#fff",
        },
        color:["#22C1D9", "#228AD9", "#ffb07e"]
      },
    };
  },
  methods: {
    onAreaTabClick: function (item) {
      this.areaTabIndex = item.index;
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "../../style//pullUp.scss";
</style>
